<template>
  <div>
    <h2>条件判断指令</h2>
    <!-- vue提供了两个条件判断指令，分别是 v-show 和 v-if -->
    <!-- 
      相同点：都能够控制元素的显示和隐藏
      不同点：
      当条件为false的时候
      - v-show是通过display:none来让元素隐藏；
      - v-if直接把元素移除了，从而让元素隐藏
     -->

    <!-- 如果一个元素，经常切换它的显示隐藏状态，用 v-show 更好 -->
    <!-- 如果起始条件是false，v-show也会创建元素，创建后让元素display:none，所以v-show有更高的初始渲染代价 -->
    <p v-show="flag">我通过v-show控制</p>
    <p v-if="flag">我通过v-if控制</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: false
    }
  }
}
</script>
